<template>
	<view>
		<!-- <uni-section title="使用插槽" type="line"> -->
		<!-- <uni-collapse  accordion v-model="accordionVal" @change="change"> -->
		<!-- <uni-collapse-item v-for="(item, index) in dataList" :key="index" :title="item.dishName" > -->
		<uni-list v-for="(item, index) in dataList" :key="index">
			<uni-list-chat :title="item.dishName + '（' + item.price  + item.unit + '）'" :avatar="item.icon"
				:note="item.info" time="2020-02-02 20:20" badge-positon="left">
				<view class="chat-custom-right uni-flex" style="justify-content: center;">
					<uni-number-box :min="1" :max="99" :value="9" />
				</view>
			</uni-list-chat>
			<view style="padding: 8px; justify-content: flex-end; " class="uni-flex">
				<view @click="onClick" class="uni-flex"
					style=" justify-content: center; background-color: #09BB07; padding: 3px; width: 120rpx; border: 1px solid #09BB07; border-radius: 5px; color: #F0F0F0;">
					加入菜单</view>

			</view>

		</uni-list>
		<!-- </uni-collapse-item> -->

		<!-- </uni-collapse> -->
		<view class="loading">{{loadingText}}</view>
		<!-- </uni-section> -->
		<!-- 	<view>
			<uni-card v-for="(item, index) in newsList" :key="index" :title="item.name" :margin="setMargin(index)"  :extra="item.shop_id" style="display: flex;" @tap="goToMenu">
				<text>{{item.shop_desc}}</text>
			</uni-card>
			 
			<view  class="loading">{{loadingText}}</view>
		</view> -->
		<view class="goods-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database();
	var _self, timer = null;
	export default {
		components: {

		},
		data() {
			return {
				dish_id: "",
				accordionVal: '1',
				dataList: [],
				selectMenuList: [],
				loadingText: '加载中...',
				pageSize: 1, //页数
				pageCurrent: 10, // 页数大小
				pattern: {
					color: "#ff0",
					selectedColor: "#00f",
					backgroundColor: "#fff",
					buttonColor: "#00aa7f"
				},
				options: [{
					icon: 'compose',
					text: '菜单',
					info: 0
				}],
				buttonGroup: [
					{
						text: '立即付款',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
			}
		},
		computed: {

		},
		methods: {
			change(e) {
				console.log(e);
			},
			onClick(e) {
				
                var count = this.options[0].info;
				count += 1;
				this.options[0].info = count;
                console.error("???", this.options[0].info);
			},
			async getData(tableName) {
				console.error("!------->", tableName);
				// uni.showLoading({
				// 	mask: true
				// })
				let res = await db.collection(tableName)
					.where({
						dish_id: this.dish_id
					})
					.skip((this.pageSize - 1) * this.pageCurrent)
					.limit(this.pageCurrent)
					.get()
				if (this.pageSize === 1) {
					this.dataList = res.result.data;
				} else {
					let _newList = [...this.dataList];
					this.dataList = _newList.concat(res.result.data); //添加在尾部
				}
				// uni.hideLoading()
				uni.hideNavigationBarLoading()
				uni.stopPullDownRefresh()
				if (this.dataList.length >= 10) {
					_self.pageSize++;
					_self.loadingText = '加载更多';
				} else {
					_self.loadingText = '已加载全部';
				}


				// return res.result.data
			},
		},
		onLoad(options) {
			_self = this;
			uni.startPullDownRefresh();
			//#ifdef APP-NVUE
			const eventChannel = this.$scope.eventChannel;
			//#endif
			//#ifndef APP-NVUE
			const eventChannel = this.getOpenerEventChannel();
			//#endif
			eventChannel.emit('acceptDataFromOpenedPage', {
				data: 'kkkk->>data from test page'
			});
			eventChannel.emit('someEvent', {
				data: 'data from test page for someEvent'
			}); //把数据传到上一页
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('acceptDataFromOpenerPage', function(data) {
				console.log("---------------->>>????????????kk", data)
			})
			uni.setNavigationBarTitle({
				title: options.navTitle
			});
			this.dish_id = options.dishId;
		},
		onPullDownRefresh() {
			this.pageSize = 1;
			uni.showNavigationBarLoading();
			this.getData("menu");
		},
		onReachBottom() {
			console.error("????++", this.pageSize);
			_self.loadingText = '加载中...';
			uni.showNavigationBarLoading();
			this.getData("menu");

		},
		onShow() {

		},
		onHide() {

		},
	}
</script>

<style lang="scss" scoped>
	.loading {
		text-align: center;
		height: 50px;
		line-height: 50px;
		color: #ccc;
	}

	.page {
		/* position: relative; */
		height: calc(100vh);
		background-color: #00CE47;
	}

	::v-deep.uni-list-chat__content-extra.data-v-3d9bc00b {
		justify-content: center
	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}
</style>
